<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>9527</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About</router-link>
    </p>
    <router-view></router-view>
</div>
<template id="home">
    <div>
        <h1>Home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<template id="about">
    <div>
        <h1>About</h1>
        <p>This is the tutorial about vue-router.</p>
    </div>
</template>


<script>
    /* 创建组件构造器  */
    var Home = Vue.extend({
        template: '#home',
        data: function() {
            return {
                msg: 'Hello, vue router!'
            }
        }
    })

    var About = Vue.extend({
        template: '#about'
    })

    router = new VueRouter({
        mode: 'hash',
//        base: __dirname,
        routes: [
            {
                path: '/home',
                component: Home
            },
            {
                path: '/about',
                component: About
            }
        ]
    })




    /* 启动路由  */
    const app = new Vue({
        router
    }).$mount('#app')
</script>
</body>
</html>
